<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     
     .div-1{
        background-color:pink;
        width: 150px;
        height: 150px;
        /* text-align:center; */
        line-height:150px;
        position:relative;
     }

     .div-2{
        background-color:yellow;
        width: 50px;
        height: 50px;
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-25px;
        margin-top:-25px;
     }
     
     .button-1{
        background-color:pink;
        text-decoration:none;
        border-radius:5px;
        color:#fff;
        border:1px solid #aaa;
        padding:8px 15px;
        font-size:12px;
        margin-left:500px;
        font-weight:bold;
     }
     .button-1:hover{
        color:#8acc07;
        background-color:#eee;
     }

     
    </style>
</head>
<body>
    <div class="div-1">
        <div class="div-2"></div>
    </div>
    <a class="button-1">交互按钮</a>
   <div class="div-3"></div>
</body>
</html>